<template>
	<view class="content">
		<view style="background: #fff;padding: 30rpx;border-radius: 20rpx;">
			<view class="scan-code" @click="upload">拍照识别</view>
		</view>
		<view style="width: 100%;display: flex;justify-content: flex-end;">
			<text style="font-size: 26rpx;margin: 10rpx;" @click="clearStore">清除数据</text>
			<text style="font-size: 26rpx;margin: 10rpx;">更换Token</text>
		</view>
		<view class="search-list">
			<view v-for="(item,index) in searchList" :key="index" class="sub" @click="edit(index)">
				<text style="font-size: 45rpx;">{{item.name}}</text>
				<text v-if="item.price">{{item.price}}元/斤</text>
				<text v-else>.....</text>
			</view>
		</view>
		<u-modal :show="show" showCancelButton title="单价" @confirm="confirmPrice" @cancel="cancel">
			<view class="slot-content">
				<u--input placeholder="请输入单价" border="surround" v-model="price" type="number"></u--input>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import axios from 'axios'
	import FormData from '../../utils/formData.js'
	export default {
		data() {
			return {
				title: 'Hello',
				base64Img: '',
				searchList: [],
				token: '24.e57b6ef671f0136c550902ee7df1290a.2592000.1662002298.282335-26874856',
				priceList: [],
				price: '',
				show: false,
				choiceIndex: '',
			}
		},
		onLoad() {

		},
		methods: {
			clearStore() {
				uni.showModal({
					content: '确认清除?',
					success() {
						uni.clearStorageSync('prices')
					}
				})
			},
			edit(index) {
				this.choiceIndex = index
				this.show = true
			},
			cancel() {
				this.show = false
			},
			confirmPrice() {
				this.show = false
				let sub = this.searchList[this.choiceIndex]
				sub.price = this.price
				this.price = null
				//更新本地价格数据
				if (this.priceList.findIndex(el => el.name == sub.name) == -1) {
					this.priceList.push(sub)
				}
				this.storge()
			},
			//存储价格到本地
			storge() {
				uni.setStorageSync('prices', JSON.stringify(this.priceList))
			},
			getToken() {
				uni.showLoading({
					mask: true,
					title: '识别中'
				})
				uni.request({
					method: 'POST',
					url: "https://aip.baidubce.com/rest/2.0/image-classify/v1/classify/ingredient?access_token=" +
						this.token,
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					data: {
						'image': this.base64Img
					},
				}).then(res => {
					uni.hideLoading()
					res[1].data.result.forEach(item=>{
						let myIndex = this.priceList.findIndex(el=>item.name == el.name)
						if(myIndex!=-1){
							item.price= this.priceList[myIndex].price
						}else{
							item.price= null
						}
					})
					this.searchList = res[1].data.result
				})
			},
			upload() {
				let _this = this
				let photo = uni.createCameraContext()
				uni.chooseImage({
					count: 1,
					sourceType: ['camera'],
					success: res => {
						uni.getFileSystemManager().readFile({
							filePath: res.tempFilePaths[0], //选择图片返回的相对路径
							encoding: 'base64', //编码格式
							success: resolve => { //成功的回调
								_this.base64Img = resolve.data
								// console.log(resolve.data)
								_this.getToken()
							}
						})
					},
					fail: (err) => {
						console.log('error', err)
					}
				})
			},
			fileToBase64(file) { //file转bse64
				let _this = this
				let reader = new FileReader();
				reader.readAsDataURL(file);
				reader.onload = function(e) {
					let splStr = e.target.result.split(',')[1]

				}
			}
		},
		onLoad() {
			this.priceList = JSON.parse(uni.getStorageSync('prices'))
		}
	}
</script>

<style>
	page {
		background: #e5f1f1;
	}

	.content {
		padding: 20rpx;
		padding-top: 50rpx;
	}

	.scan-code {
		display: flex;
		align-items: center;
		justify-content: center;
		background: #04e6c4;
		height: 150rpx;
		border-radius: 12rpx;
		font-size: 45rpx;
		font-weight: 600;
		color: #FFFFFF;
	}

	.sub {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;
		height: 150rpx;
		border-radius: 10rpx;
		background: #ff8a05;
		margin: 20rpx 0;
		font-size: 40rpx;
		color: #ffffff;
		overflow: hidden;
	}

	.edit {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 110rpx;
		height: 100%;
		background: #0082e6;
	}
</style>
